<template>
  <el-calendar v-model="value">
    <!-- <template slot="dateCell" slot-scope="{date, data}"> -->
    <template #dateCell="{date}">
      <div class="date-content">
        <span class="text">{{ date.getDate() }}</span>
        <span class="rest">{{ isWeekend(date) ? '休' : '' }}</span>
      </div>
    </template>
  </el-calendar>
</template>

<script>

export default {
  name: 'Calendar',
  components: {},
  data() {
    return {
      value: new Date()
    }
  },
  methods: {
    isWeekend(date) {
      return date.getDay() === 6 || date.getDay() === 0
    }
  }
}
</script>

<style lang="scss">
.rest {
  font-size: 12px;
  color: red;
}
.el-calendar-day,
.current,
.el-calendar-table__row {
  height: 50px;
}
</style>
